<template>
	<view class="content">
		<image :src="userInfo.HeadImg" class="header-img" @click="uploadheader"></image>
		<image src="@/static/images/editor_red.png" class="edit-img" @click="uploadheader" />

		<view class="vc-item" @click="pushVc(10, '昵称', 'NickName')">
			<text class="vc-item-title">昵称</text>
			<text class="vc-item-content">{{ userInfo.NickName }}</text>
			<image class="vc-item-arrow" src="@/static/images/right.png"></image>
		</view>
		<view class="vc-item" @click="pushVc(50, '签名', 'Sign')">
			<text class="vc-item-title">签名</text>
			<text class="vc-item-content">{{ userInfo.Sign }}</text>
			<image class="vc-item-arrow" src="@/static/images/right.png"></image>
		</view>
		<view class="vc-item" @click="pushVc(20, '手机', 'Phone')">
			<text class="vc-item-title">手机</text>
			<text class="vc-item-content">{{ userInfo.Phone }}</text>
			<image class="vc-item-arrow" src="@/static/images/right.png"></image>
		</view>
		<view class="vc-item" @click="pushVc(30, '性别', 'Gender')">
			<text class="vc-item-title">性别</text>
			<text class="vc-item-content">{{ userInfo.Gender }}</text>
			<image class="vc-item-arrow" src="@/static/images/right.png"></image>
		</view>
		<view class="vc-item" @click="pushVc(40, '生日', 'BirthDay')">
			<text class="vc-item-title">生日</text>
			<text class="vc-item-content">{{ userInfo.BirthDay }}</text>
			<image class="vc-item-arrow" src="@/static/images/right.png"></image>
		</view>
		<view class="vc-item">
			<text class="vc-item-title">身份证</text>
			<text class="vc-item-content">{{ userInfo.IdCardNo }}</text>
		</view>
	</view>
</template>

<script>
import { uploadImageToQiNiu } from '@/constant/home.js';
import { updateServePlayer } from '@/constant/schedule.js';
import { null2str } from '@/config/common.js';
export default {
	data() {
		return {
			userInfo: {}
		};
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		getUserInfo() {
			this.userInfo = JSON.parse(uni.getStorageSync('ServePlayer_UserInfo'));
			this.userInfo = null2str(this.userInfo);
		},
		pushVc(_type, _title, _key) {
			let _value = '';
			switch (_key) {
				case 'NickName':
					_value = this.userInfo.NickName;
					break;
				case 'Sign':
					_value = this.userInfo.Sign;
					break;
				case 'Phone':
					_value = this.userInfo.Phone;
					break;
				case 'BirthDay':
					_value = this.userInfo.BirthDay;
					break;
				case 'Gender':
					_value = this.userInfo.Gender;
					break;
			}
			if (_type == '50') {
				uni.navigateTo({
					url: '/packagePages/playercenter/info/setSign/index?sign=' + encodeURIComponent(JSON.stringify(this.userInfo.Sign ? this.userInfo.Sign : ''))
				});
				return;
			}
			uni.navigateTo({
				url: './edit/index?type=' + _type + '&title=' + _title + '&key=' + _key + '&values=' + _value
			});
		},
		uploadheader() {
			let that = this;
			uploadImageToQiNiu(1, 8, res => {
				that.userInfo.HeadImg = res;
				updateServePlayer(that.userInfo);
				uni.setStorageSync('ServePlayer_UserInfo', that.userInfo);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background-color: $main-page-color;
	height: 100vh;
}

.header-img {
	width: 140rpx;
	height: 140rpx;
	margin-left: 305rpx;
	margin-top: 40rpx;
	margin-bottom: 40rpx;
	border-radius: 50%;
}

.vc-item {
	display: flex;
	align-items: center;
	font-size: $main-text-size-28;
	color: $main-text-color-gray-33;
	height: 90rpx;
	background-color: #fff;
	margin-bottom: 1px;

	&-arrow {
		width: 15rpx;
		height: 27rpx;
		margin-right: 24rpx;
	}

	&-title {
		margin-right: auto;
		margin-left: 20rpx;
	}

	&-content {
		margin-right: 20rpx;
	}
}

.edit-img {
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	left: 400rpx;
	top: 150rpx;
}
</style>
